<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>Insert title here</title>

<!-- common -->
<script src="js/go-debug.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/debug.js" type="text/javascript"></script>
<script src="js/base64.js" type="text/javascript"></script>
<script src="js/canvas2image.js" type="text/javascript"></script>



<!-- kendo -->
<script src="js/kendo_js/kendo.web.min.js" type="text/javascript"></script>
<script src="js/kendo_js/kendo.window.min.js" type="text/javascript"></script>
<script src="js/kendo_js/kendo.grid.min.js" type="text/javascript"></script>

<link href="style/kendo_style/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="style/kendo_style/kendo.default.min.css" rel="stylesheet" type="text/css" />

<!-- kendo -->
<script src="js/easyui_js/jquery.easyui.min.js" type="text/javascript"></script>
<script src="js/easyui_js/jquery.layout.js" type="text/javascript"></script>
<script src="js/easyui_js/jquery.panel.js" type="text/javascript"></script>
<link href="style/easyui/default/easyui.css" rel="stylesheet" type="text/css" />

<!-- user -->
<script src="js/jquery.easydrag.handler.beta2.js" type="text/javascript"></script>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script src="js/canvas.js" type="text/javascript"></script>
<script src="js/ui.js" type="text/javascript"></script>
<script src="js/fun.js" type="text/javascript"></script>





</head>
<body onselectstart="return false" >
	<div id="left_panel" region="west" style="width: 330px; padding-top:10px;" split="true">


		<form id="search_panel">
			<ul style="width:260px;">
				<li><label>Customer</label><select disabled="true" id="cutonmer_select"></select></li>
				<li><label>Name</label><input id="ci_name" class="k-input" type="text" style="width:150px;"/></li>
				<li><label>CI Class Type</label><select id="ci_class_type_select" disabled="true"><
				</select></li>
				<li><label>CI Super-Class</label><select id="ci_super_class_select" disabled="true"></select></li>
				<li><label>CI Class</label><select id="ci_class_select" disabled="true"></select></li>
				<li class="btn"><input class="k-button" type="button" onclick="getSearch()" value="Search" /><input class="k-button" type="button" value="Clear" onclick="setSerachPanel()" /></li>
			</ul>
		</form>


		<div id="ci_list_panel">

			<table id="ci_list_grid">
				<thead>
					<th width="100">Name</th>
					<th width="100">CMDB ID</th>
					<th width="450">Description</th>
					<th width="150">SerialNbr</th>
					<th width="100">Usage</th>
					<th width="100">Class Type</th>
					<th width="100">Super Class</th>
					<th width="100">Class</th>
					<th width="100">Status</th>
				</thead>
				<tbody>

				</tbody>

			</table>
		</div>



	</div>
	<!-- // #left_panel -->


	<div id="panel" region="center" split="true" >
		<div id="canvas_panel">
			<div id="canvas"  style="width:100%; height:100%;"></div>
			<!--  <canvas id="canvas"  style="width:400px; height:150px"></canvas>-->
		</div>
		<div id="control_panel" class="k-item k-first  k-state-default">
			 <label style="margin-left:20px;">LAYER</label><input id="Topology" type="checkbox" name="line" value="green" checked="checked" /><label>Topology</label><input id="Service" type="checkbox" name="line" value="gray" /><label>Service</label>
			 <input type="button" value="Del" onclick="delNode()" />
			 <input type="button" value="Zoom In" onclick="javascript:go_panel.commandHandler.decreaseZoom();" />
			 <input type="button" value="Zoom Out" onclick=" javascript:go_panel.commandHandler.increaseZoom(); " />
			 <input type="button" value="1:1" onclick="javascript:go_panel.commandHandler.resetZoom(); " />
             <input type="button" value="Zoom to Fit" onclick="javascript:go_panel.zoomToFit();" />
             <input type="button" value="Save Document" onclick="javascript:saveFile();" /> 
             <input type="file" value="Open Document"  onchange="javascript:openFile(this.files[0]);" />
              <input type="button" value="Save As Image" onclick="javascript:saveAsImage();" /> 
              <input type="button" value="Save Link" onclick="javascript:saveLink()" /> 
		</div>
	
	
	
	</div>
	<!-- // panel -->
	<div id="right_panel" region="east" split="true" style="width: 300px; padding-top:10px;">


		<div id="properties_grid_panel">
		<div class="k-grid-content">
			<table id="properties_grid" class="k-focusable k-selectable">
				<tbody>
				</tbody>
			</table>
		</div>

		</div>
		
		
		
		<div id="attributes_grid_panel">
			<div class="k-grid-content">
				<table id="attributes_grid" class="k-focusable k-selectable" cellspacing="0">
					<tbody>
				</tbody>
			</table>
			</div>

		</div>




	</div>
	<!-- // #right_panell -->

	<div class="clear"></div>
	<img id="showimg" src="images/red-cross-50x50.png" />

	
	
	<object   id="fileDialog"   width="0px"   height="0px"   classid="clsid:F9043C85-F6F2-101A-A3C9-08002B2F49FB"   codebase="http://activex.microsoft.com/controls/vb5/comdlg32.cab"> 
</body>
</html>